<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>确认订单</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <style>
        html,
        body {
            width: 100%;
            min-height: 100%;
            background: #F3EFEE;
        }

        .aui-active .aui-bar-tab-label {
            color: #f5a51c
        }

        .login {
            height: 240px;
            background-image: -webkit-linear-gradient(0deg, #f5c674, #ed824c);
            /*background-image: url(../../image/personal_bkg.jpg);background-repeat: no-repeat; background-size: cover;*/
            position: relative;
        }

        .login .personal_logo {
            width: 4rem;
            height: 4rem;
            border-radius: 50%;
            margin: 0 auto 9px;
            /*position: absolute; top: 60px; left: 20px;*/
        }

        .login .userinfo {
            position: absolute;
            top: 60px;
            text-align: center;
            left: 0;
            right: 0;
        }

        .login .userinfo .title {
            font-size: 0.8rem;
            color: #fff;
        }
        /* 设置条目 */

        .item {
            height: 3rem;
            line-height: 3rem;
            padding-left: 0.7rem;
            background-color: #fff;
        }

        .item_ico {
            float: left;
            width: 2.3rem;
            padding: 0.7rem 0.7rem 0.7rem 0;
        }

        .item_arrow {
            float: right;
            width: 1.5rem;
            padding: 1rem 0.7rem 1rem 0;
        }

        .item span {
            font-size: 0.7rem;
        }

        [v-cloak] {
            display: none;
        }

        #tab1 .aui-active {
            color: #ff6565;
            border-bottom: 2px solid #ff6565;
        }

        .aui-list-item-middle {
            padding-left: 0.75rem;
        }

        .aui-radio:checked {
            background-color: #ff6565;
            border: solid 1px #ff6565;
        }

        .aui-toast {
            width: 9.5rem;
            background: #999;
            opacity: 0.7;
            height: 4rem;
            min-height: 4rem;
            line-height: 4rem;
        }

        .aui-toast-content {
            color: #fff;
        }

        .aui_list {
            background-image: linear-gradient(0, #eee, #eee 50%, transparent 50%);
        }

        .aui-list-item {
            background-image: linear-gradient(0, #eee, #eee 50%, transparent 50%) !important;
        }

        .aui-refresh-content {
            min-height: 100vh;
            padding-bottom: 2.5rem;
        }

        .exchangeList_img {
            background: url(../../image/cpimg.jpg) center center/cover no-repeat;
            background-size: 100% 100%;
        }

        .exchangeList_right {
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            padding: 0.5rem 0.5rem 0;
        }

        .aui-list.ex .aui-list-item-media {
            width: 5rem;
            height: 4rem;
            padding-right: 1rem;
        }

        .aui-list.ex .aui-list-item-media {
            padding-top: 0;
            padding-bottom: 0;
        }

        .exchangeList_right_txt {
            position: relative;
            width: 100%;
        }

        .exchangeList_right_bottom {
            position: absolute;
            width: 100%;
            bottom: 0;
            left: 0;
            line-height: 0.6rem;
        }

        .exchangeList_right_bottom1 {
            float: left;
            font-size: 0.7rem;
            color: #ff7a7a;
        }

        .exchangeList_right_bottom2 {
            float: right;
        }

        .aui-list.ex .aui-list-item-title {
            font-size: 0.7rem;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
        }

        .title {
            padding: 0.7rem 0 0.5rem;
            font-size: 0.8rem;
            line-height: 0.8rem;
        }

        .goumai>div.countNum {
            width: 100%;
            float: right;
            margin-left: 2rem;
            background: #fff;
        }

        .countNum input[type="number"] {
            width: 1.2rem;
            height: 1.2rem;
            border: 1px solid #cccccc;
            text-align: center;
            float: left;
            font-size: 0.6rem;
            border-left: none;
            border-right: none;
        }

        .countNum input[type="button"] {
            padding: 0 0.5rem;
            height: 1.2rem;
            border: 1px solid #cccccc;
            text-align: center;
            float: left;
            font-size: 0.6rem;
        }

        .countNum input[disabled] {
            color: #ccc;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak style="box-sizing:border-box">
        <div class="aui-refresh-content">
            <ul class="aui-list aui-media-list" style="border-top:10px solid #F3EFEE;">
                <li class="aui-list-item-middle" style="padding-right:0.75rem;padding-top: 0.5rem;" @click="open_userUrl(infoList.address.a_id)" v-if="infoList.address">
                    <div class="aui-media-list-item-inner" style="padding-left:1.5rem;">
                        <div class="aui-list-item-media" style="width: 9.5rem;">收货人：{{infoList.address.consignee}}</div>
                        <div class=" makeSure_get_text" style="">{{infoList.address.telephone}}</div>
                    </div>
                    <div class="aui-media-list-item-inner" style="margin-top: -0.7rem;">
                        <div class="aui-list-item-media" style="width:1.5rem;padding-right:0">
                            <img src="../../image/my/m39.png" style="width:0.8rem;">
                        </div>
                        <div class="aui-list-item-inner aui-list-item-arrow">
                            <div class="aui-list-item-text">
                                <div class="aui-list-item-title aui-font-size-12">收货地址：{{infoList.address.province}}{{infoList.address.city}}{{infoList.address.district}}{{infoList.address.place}}</div>
                            </div>
                        </div>
                    </div>
                    <img src="../../image/my/m38.png" alt="" style="margin-top: 0.5rem;">
                </li>

                <li class="aui-list-item-middle" style="padding-right:0.75rem;padding-top: 0.5rem;" @click="open_userUrl()" v-else>
                    <div class="aui-media-list-item-inner">
                        <div class="aui-list-item-media" style="width:1.5rem;padding-right:0">
                            <img src="../../image/my/m39.png" style="width:0.8rem;">
                        </div>
                        <div class="aui-list-item-inner aui-list-item-arrow">
                            <div class="aui-list-item-text">
                                <div class="aui-list-item-title aui-font-size-12">点击添加收货地址</div>
                            </div>
                        </div>
                    </div>
                    <img src="../../image/my/m38.png" alt="" style="margin-top: 0.5rem;">
                </li>

                <li>
                    <div class="user_nav_line"></div>
                </li>
            </ul>
            <ul class="aui-list aui-media-list" v-for="(items, index) in infoList.goods" :key="index" v-if="infoList.goods" style="margin-top:10px;">
                <li class="aui-list-item-middle aui-list-item" v-if="items.store">
                    <div class="aui-media-list-item-inner">
                        <div class="aui-list-item-media" style="width:1.4rem;padding-right:5px">
                            <img :src="items.store.logo" class="aui-list-img-sm order_sm_img">
                        </div>
                        <div class="aui-list-item-inner">
                            <div class="aui-list-item-text">
                                <div class="aui-list-item-title aui-font-size-14">{{items.store.name}}</div>
                            </div>

                        </div>
                    </div>
                </li>
                <li v-for="(item, i) in items.goodslist" :key="i" v-if="items.goodslist" class=" aui-list-item-middle aui-list-item apply_main_li">
                    <div class="aui-media-list-item-inner">
                        <div class="aui-list-item-media" style="width: 5rem;">
                            <img :src="item.logo_pic" class="aui-list-img-md">
                        </div>
                        <div class="aui-list-item-inner">
                            <div class="aui-list-item-text">
                                <div class="aui-list-item-title" style="width: 100%;padding-right: 0.2rem;">
                                    <div class="aui-font-size-12">{{item.goods_name}}</div>
                                    <!-- <div class="aui-list-item-text aui-font-size-12">黑色:XL码</div> -->
                                    <div class="aui-list-item-text aui-font-size-18 make_money_tag" style="margin-top:0.5rem">
                                        <div class="make_nav_content_div" v-if="item.area_type==1">
                                            <span class="make_money_tag_text">￥</span>
                                            <span style="color:#ff6565;">{{item.price}}</span>
                                        </div>
                                        <div class="make_nav_content_div" v-else-if="item.area_type==0">
                                            <span style="color:#ff6565;">{{item.price}}</span>
                                            <span class="make_money_tag_text">兑换币</span>
                                        </div>
                                        <div class="aui-list-item-right" style="font-size:0.7rem">×{{item.num}}</div>
                                        <!-- <div class="title" style="line-height:1.3rem;" v-if="skuId=='false'">

                             <div class="goumai aui-bar aui-bar-btn aui-bar-btn-sm" style="width:30%;float:right">
                                 <div class="countNum clearfix" style="display:flex;justify-content:space-between">
                                     <input type="button" value='-'  @click="numDel()" :disabled="num <= 1 ? 'disabled' : false"  />
                                     <input type="number" size='3' readonly v-model='num' />
                                     <input type="button" value='+' @click="numAdd()"/>
                                 </div>
                             </div>
                         </div> -->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div v-if="item.exchange && item.exchange.length > 0">
                        <h5>您已选择以下赠品</h5>
                        <div class="aui-list ex" v-for="ex in item.exchange">
                            <div class="exchangeList_right">
                                <div class="aui-list-item-media">
                                    <div :style="'background: url('+ex.logo_pic+') no-repeat center/cover;width:100%;height:100%;'" class="exchangeList_img"></div>
                                </div>
                                <div class="exchangeList_right_txt">
                                    <div class="aui-list-item-text">
                                        <div class="aui-list-item-title">{{ex.goods_name}}</div>
                                    </div>
                                    <div class="aui-list-item-text" v-if="ex.sku_info">规格：{{ex.sku_info}}</div>
                                    <div class="exchangeList_right_bottom clearfix">
                                        <div class="exchangeList_right_bottom1">赠品</div>
                                        <div class="exchangeList_right_bottom2">x{{ex.num}}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </li>
                <li class="aui-list-item aui-list-item-middle">
                    <div class="aui-media-list-item-inner">

                        <div class="aui-list-item-inner aui-list-item-arrow">
                            <div class="aui-list-item-text">
                                <div class="aui-list-item-title aui-font-size-14">配送方式</div>
                                <div class="aui-list-item-right aui-font-size-14" style="color:#000" @click="sendType(items.store.express_fee)">
                                    <span v-if="is_selflift == 0">快递 <i style="font-style: normal" v-if="items.store.express_fee == 0">免邮</i><i style="font-style: normal" v-else>￥{{items.store.express_fee}}</i></span>
                                    <span v-else-if="is_selflift == 1">自提</span>

                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                <li class="aui-list-item aui-list-item-middle">
                    <div class="aui-media-list-item-inner" style="padding:0;">
                        <div class="aui-list-item-media" style="width:8rem;">
                            <div class="aui-list-item-title aui-font-size-14">买家留言 ({{textNum}}/200)</div>
                        </div>
                    </div>
                    <textarea maxLength="200" placeholder="请填写您对卖家的特别要求" style="font-size:0.6rem;padding-right: 0.7rem;margin-top:-0.5rem;height:4rem;line-height:0.8rem" v-model="customerMessage"></textarea>
                </li>
                <li class="aui-list-item aui-list-item-middle" style="line-height:2.2rem;padding-right:0.75rem">
                    <div class="aui-media-list-item-inner" style="display:flex;justify-content:flex-end;margin-top:0.2rem;">
                        <div class="aui-list-item-right" style="margin-right:8px;font-size: 0.7rem;">共{{items.store.num}}件商品</div>

                        <div class="aui-list-item-right" style="font-size: 0.7rem;">总计:</div>
                        <div class="aui-list-item-right" style="color:#ff6565;font-size: 0.7rem;">￥{{items.store.subtotal}}</div>

                        <!-- <div class="aui-list-item-right" style="color:#ff6565;font-size: 0.7rem;" v-else-if="item.area_type==0">{{items.store.subtotal}}兑换币</div> -->
                    </div>

                </li>

            </ul>
        </div>
        <div class="makeSure_footer_pay_all">
            <div class="makeSure_footer_pay_all_text">总计：</div>
            <div class="makeSure_footer_pay_all_money">￥{{dj}}</div>
            <div class="makeSure_footer_pay_all_btn" @click="open_sendOrder()">提交订单</div>
        </div>

    </div>

</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/zepto.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/utils.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/aui-tab.js"></script>
<script type="text/javascript" src="../../script/aui-scroll.js"></script>
<script type="text/javascript" src="../../script/aui-pull-refresh.js"></script>
<script type="text/javascript" src="../../script/aui-toast.js"></script>
<script type="text/javascript">
    var header_top = $api.byId('header_top');
    var header_topPos = $api.offset(header_top)
    apiready = function() {
        api.showProgress({
            title: '努力加载中...',
            text: '先喝杯茶...',
            modal: false
        });
        var app = new Vue({
            el: '#app',
            data: {
                addressId: '',
                infoList: [],
                is_selflift: 0,
                customerMessage: '',
                textNum: 0,
                num: 1,
                dj: 0,
            },
            created: function() {
                var $this = this;
                $this.getOrder()
                api.addEventListener({
                    name: 'changeAddress'
                }, function(ret, err) {

                    if (!ret.value.value) {
                        $this.infoList.address = null
                    } else {

                        if (!$this.infoList.address) {
                            var back = $this.infoList
                            $this.infoList = {}
                            $this.infoList = Object.assign({
                                address: ret.value.value
                            }, back)
                        } else {
                            $this.infoList.address = ret.value.value
                        }
                        $this.addressId = ret.value.value.a_id
                        $this.getOrder()
                    }

                });
                api.addEventListener({
                    name: 'sendType'
                }, function(ret, err) {
                    $this.is_selflift = ret.value.type

                });
            },
            mounted: function() {
                var $this = this;
                api.hideProgress();
                // var pullRefresh = new auiPullToRefresh({
                //     container: document.querySelector('.aui-refresh-content'),
                //     triggerDistance: 100
                // }, function(ret) {
                //     if (ret.status == "success") {
                //       $this.getOrder(function () {
                //         setTimeout(function () {
                //           pullRefresh.cancelLoading(); //刷新成功后调用此方法隐藏
                //         }, 500)
                //       })
                //     }
                // })
            },
            methods: {

                open_userUrl: function(id) {
                    var id = id || null
                    api.openWin({
                        name: 'user_url',
                        url: './user_url.html',
                        rect: {
                            x: 0,
                            y: 0,
                            w: 'auto',
                            h: api.frameHeight
                        },
                        pageParam: {
                            id: id
                        }
                    });


                },
                getOrder: function(fn) {
                    var $this = this;
                    // console.log(JSON.stringify(api.pageParam))
                    var under_type = api.pageParam.under_type || 1
                    var goodsId = api.pageParam.goodsId || null
                    var num = api.pageParam.num || null
                    var goodsId = api.pageParam.goodsId || null
                    var sku_id = api.pageParam.sku_id || null
                    var exchange_id = api.pageParam.exchange_id || 0
                    var exchange_sku_id = api.pageParam.exchange_sku_id || 0
                    var cartId = api.pageParam.cartId || null
                    var addressId = $this.addressId || null
                    console.log(JSON.stringify(exchange_id))
                    api.ajax({
                        url: window.Url.Freeorder_index,
                        method: 'post',
                        data: {
                            values: {
                                token: $api.getStorage('token'),
                                under_type: under_type, //1-单独购买,2-购物车
                                addressId: addressId, //收货地址id(可不传)
                                goodsId: goodsId, //	商品ID(type为1必传)
                                num: num, //	数量(type为1必传)
                                sku_id: sku_id, //	sku_id((可不传))
                                // give_ids: exchange_id, //	普通买赠商品购买需传，赠品id,买赠商品必传
                                give_ids: exchange_id, //普通买赠商品购买需传，赠品sku_id,可传
                                cartId: cartId, //	type为2必传（-1-2-）
                                is_selflift: 0, //是否自提，1-是，0-否
                                shop_id: api.pageParam.shop_id || $api.getStorage('shop_id') || ""
                            }
                        }
                    }, function(ret, err) {

                        if (ret) {
                            if (ret.re == 1) {
                                $this.infoList = ret.data;
                                $this.dj = ret.data.total;
                                console.log(JSON.stringify(ret.data))
                                $this.addressId = ret.data.address ? ret.data.address.address_id : ''
                                fn && fn()
                            } else {
                                api.toast({
                                    msg: ret.info,
                                    duration: 2000,
                                    location: 'middle'
                                });
                            }
                        } else {
                            api.alert({
                                msg: JSON.stringify(err)
                            });
                        }
                    })
                },
                open_sendOrder: function() {
                    var $this = this;
                    var under_type = api.pageParam.under_type || 1
                    var goodsId = api.pageParam.goodsId || null
                    var num = api.pageParam.num || null
                    var goodsId = api.pageParam.goodsId || null
                    var sku_id = api.pageParam.sku_id || null
                    var exchange_id = api.pageParam.exchange_id || 0
                    var exchange_sku_id = api.pageParam.exchange_sku_id || 0
                    var cartId = api.pageParam.cartId || null
                    console.log(JSON.stringify(exchange_id))
                    if (under_type == 1) {
                        api.ajax({
                            url: window.Url.Freeorder_makeOrder,
                            method: 'post',
                            data: {
                                values: {
                                    token: $api.getStorage('token'),
                                    addressId: $this.addressId, //收货地址id
                                    goodsId: goodsId, //	商品ID
                                    nums: num, //	数量
                                    sku_id: sku_id, //	sku_id
                                    give_ids: exchange_id, //	普通买赠商品购买需传，赠品id,买赠商品必传
                                    // exchange_sku_id: exchange_sku_id, //普通买赠商品购买需传，赠品sku_id,可传
                                    is_selflift: $this.is_selflift, //是否自提，1-是，0-否
                                    comment: $this.customerMessage,
                                    shop_id: api.pageParam.shop_id || $api.getStorage('shop_id') || ""
                                }
                            }
                        }, function(ret, err) {
                            console.log(JSON.stringify(ret));
                            // alert($api.getStorage('is_dhp'))
                            if (ret.re == 1) {

                                if ($api.getStorage('is_dhp') == 1) {
                                  var o_ids = [];
                                  var order_no =  ret.data.order_no;
                                  o_ids.push(ret.data.order_id)
                                    api.confirm({
                                        title: '提示',
                                        msg: '兑换币不足，是否用余额支付？',
                                        buttons: ['确定', '取消']
                                    }, function(ret, err) {
                                        if (ret) {
                                            //  alert( JSON.stringify( ret ) );
                                            var btn_index = ret.buttonIndex;
                                            if (btn_index == 1) {

                                                  // api.toast({ msg: ret.info,duration: 2000,location:'middle' });
                                              var jsfun = 'window.location.reload();';
                                              api.execScript({
                                                  name: 'root',
                                                  frameName: 'carlist',
                                                  script: jsfun
                                              });
                                              api.openFrame({
                                                  name: 'pay_order',
                                                  url: './pay_order.html',
                                                  bounces: false,
                                                  pageParam: {
                                                      order_id: o_ids,
                                                      order_no: order_no,
                                                      pay_class: 1,
                                                      under_type: under_type
                                                  }
                                              });
                                            } else {
                                                api.toast({
                                                    msg: '取消兑换',
                                                    duration: 2000,
                                                    location: 'bottom'
                                                });
                                                setTimeout(function() {
                                                    $api.setStorage('is_dhp', 0);
                                                    api.closeWin({
                                                        name: 'order'
                                                    });
                                                }, 1000)
                                            }
                                        } else {
                                            alert(JSON.stringify(err));
                                        }
                                    });

                                } else {
                                    var o_ids = [];
                                    o_ids.push(ret.data.order_id)
                                        // api.toast({ msg: ret.info,duration: 2000,location:'middle' });
                                    var jsfun = 'window.location.reload();';
                                    api.execScript({
                                        name: 'root',
                                        frameName: 'carlist',
                                        script: jsfun
                                    });
                                    api.openFrame({
                                        name: 'pay_order',
                                        url: './pay_order.html',
                                        bounces: false,
                                        pageParam: {
                                            order_id: o_ids,
                                            order_no: ret.data.order_no,
                                            pay_class: 1,
                                            under_type: under_type
                                        }
                                    });
                                }

                            } else if (ret.re == 3) {
                              api.toast({
                                  msg: '兑换成功',
                                  duration: 2000,
                                  location: 'bottom'
                              });
                              setTimeout(function(){
                                api.closeWin({
                                    name: 'order'
                                });
                              },1000)

                            } else if (ret.re == 0) {
                                if ($api.getStorage('is_dhp') == 1) {
                                    api.confirm({
                                        title: '提示',
                                        msg: '无法兑换，是否用余额支付？',
                                        buttons: ['确定', '取消']
                                    }, function(ret, err) {
                                        if (ret) {
                                            //  alert( JSON.stringify( ret ) );
                                            var btn_index = ret.buttonIndex;
                                            if (btn_index == 1) {

                                            } else {
                                                api.toast({
                                                    msg: '取消兑换',
                                                    duration: 2000,
                                                    location: 'bottom'
                                                });
                                                setTimeout(function() {
                                                    $api.setStorage('is_dhp', 0);
                                                    api.closeWin({
                                                        name: 'order'
                                                    });
                                                }, 1000)
                                            }
                                        } else {
                                            alert(JSON.stringify(err));
                                        }
                                    });

                                }
                            } else {
                                api.toast({
                                    msg: ret.info,
                                    duration: 2000,
                                    location: 'middle'
                                });
                            }
                        })
                    } else {
                        // alert(cartId)
                        api.ajax({
                            url: window.Url.Freeorder_cartMakeOrder,
                            method: 'post',
                            data: {
                                values: {
                                    token: $api.getStorage('token'),
                                    addressId: $this.addressId, //收货地址id
                                    cartIds: cartId, //	type为2必传（-1-2-）
                                    is_selflift: $this.is_selflift, //是否自提，1-是，0-否
                                    comment: $this.customerMessage,
                                    under_type: under_type
                                }
                            }
                        }, function(ret, err) {
                            if (ret) {
                                console.log(JSON.stringify(ret))
                                    // api.toast({ msg: ret.info,duration: 2000,location:'middle' });
                                if (ret.re == 1) {
                                    var jsfun = 'window.location.reload();';
                                    api.execScript({
                                        name: 'root',
                                        frameName: 'carlist',
                                        script: jsfun
                                    });
                                    api.openFrame({
                                        name: 'pay_order',
                                        url: './pay_order.html',
                                        bounces: false,
                                        pageParam: {
                                            order_id: ret.data.order_id,
                                            order_no: ret.data.order_no, //ret.data.order_no,
                                            under_type: 2
                                        }
                                    });
                                } else {
                                    api.toast({
                                        msg: ret.info,
                                        duration: 2000,
                                        location: 'middle'
                                    });
                                }

                            } else {
                                api.alert({
                                    msg: JSON.stringify(err)
                                });
                            }
                        })
                    }
                },
                sendType: function(express_fee) {
                    api.openFrame({
                        name: 'sendType',
                        url: './sendType.html',
                        bounces: true,
                        pageParam: {
                            express_fee: express_fee
                        }
                    });
                }
            },
            watch: {
                customerMessage: function(val) {
                    if (val.length == 200) {
                        api.toast({
                            msg: '不能超过200字',
                            duration: 1000,
                            location: 'middle'
                        });
                        this.textNum = val.length;
                    } else {
                        this.textNum = val.length
                    }

                }
            }
        })
    };
</script>

</html>
